/**
 * Created by karl.zheng on 2018/3/21.
 */
import React from 'react';
import {connect} from 'react-redux';
import {api} from '../../../config/index'
require('./index.css')

class Loading extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            clock: ''
        };
        this.unclock = this.unclock.bind(this);
    }

    componentDidMount(){
        let _this = this;
        this.setState({
            clock: setTimeout(function(){
                let paramsArray = [];
                let params = {
                    userId: _this.props.account.userId,
                    // userName: _this.props.account.userName,
                    token: _this.props.account.token,
                    activeTime: _this.props.account.activeTime,
                    // accountType: _this.props.account.accountType
                };

                Object.keys(params).forEach(key => paramsArray.push(key+'='+params[key]));
                let url = api.redirect_uri + '?' + paramsArray.join('&');
                // console.log(url);
                window.location.href= url;
            }, 2000)
        });
    }

    componentWillUnmount(){
        this.unclock();
    }

    unclock(){
        clearTimeout(this.state.clock);
    }

    render(){
        return (
            <div className="content win-loading">
                <h2 className="logo block">POCKET GAMES</h2>
                <div className="info">
                    <p>Account:  <span>{this.props.account.userName}</span></p>
                    <p>Password: <span>{(this.props.account.password?this.props.account.password.substring(0,10):"")+'...'}</span></p>
                </div>
                <div className="loading">Logging in</div>
                <div className="line"></div>
                <a href="javascript:void(0);" className="change" onClick={()=>{
                    this.unclock();
                    this.context.router.push('/login/choose');
                }}>
                    <span className="switch">
                    </span>
                    <span>Change Account</span>
                </a>
            </div>
        )
    }
}

Loading.contextTypes = {
    router: React.PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
    account: state.user,
    query: state.query
})

const mapDispatchToProps = (dispatch) => ({
    change: (win) => {
        dispatch(changeWin(win));
    }
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Loading)
